<template>
  <!-- 社交消息页面 -->
  <view
    class="main"
    :style="{ background: xiaoxiData.length > 0 ? '#F8F8FA' : '#ffffff' }"
  >
    <!-- 顶部显示 -->
    <view class="roof">
      <view class="left" @click="handleTui">
        <image src="../../imges/shangYe.png" mode="aspectFill"></image>
        <text>社交消息</text>
      </view>
      <view class="right" @click="handleLookZhe">...</view>
    </view>

    <view class="zhe" v-if="zhe_zhao" @click="handleCloseZhe">
      <view class="child">
        <view class="jiao"></view>
        <view class="read" @tap="oneEnterDelect()">一键清除</view>
        <view class="delect" @tap="oneEnterRead()">一键全读</view>
      </view>
    </view>
    <view
      class="list"
      v-for="(item, index) in xiaoxiData"
      :key="index"
      v-if="xiaoxiData.length > 0"
    >
      <view class="top">
        <view class="top1">
          <text class="dian" v-if="item.isRead == 0"></text>
          <text class="activeDian" v-else></text>
          <view class="text">{{ item.content }}</view>
        </view>
        <view class="time">{{ item.showDate }}</view>
      </view>
      <!-- 名片展示 -->
      <view class="card" v-if="item.businessType == 9 && item.msgType == 8001">
        <view class="c-top">
          <view @tap="toCard(item.senderId, item.id)" class="left">
            <image :src="item.avatarUrl" class="tou" mode="aspectFill"></image>
            <view class="dj">V{{ item.memberLevel }}</view>
            <image
              src="../../imges/nvsheng.png"
              class="sex"
              mode="aspectFill"
              v-if="item.sex == 2"
            ></image>
            <image
              src="../../imges/nansheng.png"
              class="sex"
              mode="aspectFill"
              v-if="item.sex == 1"
            ></image>
          </view>
          <view class="right">
            <view class="name">{{ item.realName }}</view>
            <view class="company">{{ item.company }}</view>
            <view class="zhiwei">{{ item.post }}</view>
          </view>
        </view>
        <view class="center">
          <view class="phone">
            <image src="../../imges/dianhua.png" mode="aspectFill"></image>
            <view class="">
              手机 : {{ item.telphone }}
              <text v-if="item.dealResult != 1" class="jiaohuan"
                >（交换名片后可查看）</text
              >
            </view>
          </view>
          <view class="city">
            <image src="../../imges/chengshi.png" mode="aspectFill"></image>
            <text v-if="item.province || item.city"
              >城市 : {{ item.province }} {{ item.city }}</text
            >
            <view v-else>
              城市 :
              <text style="color: #999">暂未设置</text>
            </view>
          </view>
          <view class="email">
            <image src="../../imges/youxiang.png" mode="aspectFill"></image>
            <text>邮箱 : {{ item.mail ? item.mail : "暂未设置" }}</text>
          </view>
        </view>
        <view class="bottom">
          <view v-if="item.dealResult == 0" class="chushi">
            <view class="cha">
              <image src="../../imges/jujue.png" mode="aspectFill"></image>
              <text @tap="jujue(item.id)">拒绝</text>
            </view>
            <view class="gou">
              <image src="../../imges/gou.png" mode="aspectFill"></image>
              <text @tap="tongyi(item.id)">交换名片</text>
            </view>
            <view @tap="toCard(item.senderId, item.id)" class="heCard"
              >看TA的名片</view
            >
          </view>
          <view v-if="item.dealResult != 0" class="yiyunxu">
            <view class="yunxu" v-if="item.dealResult == 1">
              <image src="../../imges/gou.png" mode="aspectFill"></image>
              <text>已同意</text>
            </view>
            <view class="jujue" v-if="item.dealResult == 2">
              <image src="../../imges/jujue.png" mode="aspectFill"></image>
              <text>已拒绝</text>
            </view>
            <view @tap="toCard(item.senderId, item.id)" class="heCard"
              >看TA的名片</view
            >
          </view>
        </view>
      </view>
      <!-- 名片被同意被拒绝 -->
      <view
        class="qzCard1"
        v-if="item.businessType == 9 && item.msgType != 8001"
        @tap="toCard(item.senderId, item.id)"
      >
        <view class="c-top">
          <view class="left">
            <image :src="item.avatarUrl" class="tou" mode="aspectFill"></image>
            <view class="dj">V{{ item.memberLevel }}</view>
            <image
              src="../../imges/nvsheng.png"
              class="sex"
              mode="aspectFill"
              v-if="item.sex == 2"
            ></image>
            <image
              src="../../imges/nansheng.png"
              class="sex"
              mode="aspectFill"
              v-if="item.sex == 1"
            ></image>
          </view>
          <view class="right">
            <view class="name">{{ item.realName }}</view>
            <view class="company">{{ item.company }}</view>
            <view class="zhiwei">{{ item.post }}</view>
          </view>
        </view>
        <view class="center">
          <view class="phone">
            <image src="../../imges/dianhua.png" mode="aspectFill"></image>
            <view class="">
              手机 : {{ item.telphone }}
              <!-- <text v-if="item.dealResult != 1" class="jiaohuan">（交换名片后可查看）</text> -->
            </view>
          </view>
          <view class="city">
            <image src="../../imges/chengshi.png" mode="aspectFill"></image>
            <text v-if="item.province || item.city"
              >城市 : {{ item.province }} {{ item.city }}</text
            >
            <view v-else>
              城市 :
              <text style="color: #999">暂未设置</text>
            </view>
          </view>
          <view class="email">
            <image src="../../imges/youxiang.png" mode="aspectFill"></image>
            <text>邮箱 : {{ item.mail ? item.mail : "暂未设置" }}</text>
          </view>
        </view>
        <view class="bottom">
          <view class="yiyunxu"><view class="heCard">看TA的名片</view></view>
        </view>
      </view>
      <!-- 圈子被邀请展示 8007 -->
      <view
        class="qzCard"
        v-if="item.businessType == 12 && item.msgType == 8007"
      >
        <view class="c-top">
          <view
            @tap="toDetail(item.org.id, item.id, item.org.firstDistribution)"
            class="left"
            ><image :src="item.org.orgUrl" class="tou" mode="aspectFill"></image
          ></view>
          <view class="right">
            <view class="name">{{ item.org.orgName }}</view>
            <view class="friendsTopic">{{ item.org.orgIntroduce }}</view>
            <view class="num">
              <!-- <image :src="item1" mode="aspectFill" v-for="item1 in item.org.userList"></image> -->
              <image
                :src="item1"
                mode="aspectFill"
                v-for="(item1, index1) in sliceImg(item.org.userList)"
                :style="{
                  position: 'absolute',
                  top: 0,
                  left: 20 * index1 + 'rpx',
                }"
              ></image>
              <text class="cy" :style="{ marginLeft: left(item.org.userList) }"
                >成员 {{ item.org.userCount }}</text
              >
              <text>帖子 {{ item.org.postCount }}</text>
            </view>
            <view class="kongbiaoqian" v-if="item.org.friendsTopic"></view>
            <text class="biaoqian" v-if="item.org.friendsTopic">{{
              item.org.friendsTopic
            }}</text>
          </view>
        </view>
        <view @tap="toCard(item.senderId, item.id)" class="center">
          <image :src="item.avatarUrl" mode="aspectFill"></image>
          <view class="right">
            <text class="name">{{ item.realName }}</text>
            <text class="company">{{ item.company }}</text>
          </view>
        </view>
        <view class="bottom">
          <!-- 初始 -->
          <view
            v-if="item.dealResult == 0 && item.msgType == 8007"
            class="chushi"
          >
            <view class="cha">
              <image src="../../imges/jujue.png" mode="aspectFill"></image>
              <text @tap="jujueQz(item.id)">拒绝</text>
            </view>
            <view class="gou">
              <image src="../../imges/gou.png" mode="aspectFill"></image>
              <text
                @tap="joinQz(item.org.id, item.id, item.org.firstDistribution)"
                >加入圈子</text
              >
            </view>
            <view @tap="toCard(item.senderId, item.id)" class="heCard"
              >看TA的名片</view
            >
          </view>
          <view v-if="item.dealResult != 0" class="yiyunxu">
            <view class="yunxu" v-if="item.dealResult == 1">
              <image src="../../imges/gou.png" mode="aspectFill"></image>
              <text>已同意</text>
            </view>
            <view class="jujue" v-if="item.dealResult == 2">
              <image src="../../imges/jujue.png" mode="aspectFill"></image>
              <text>已拒绝</text>
            </view>
            <view @tap="toCard(item.senderId, item.id)" class="heCard"
              >看TA的名片</view
            >
          </view>
        </view>
      </view>
      <!-- 圈子被同意被拒绝 -->
      <view
        class="qzCard1"
        v-if="item.businessType == 12 && item.msgType != 8007"
        @tap="toCard(item.senderId, item.id)"
      >
        <view class="c-top">
          <view class="left">
            <image :src="item.avatarUrl" class="tou" mode="aspectFill"></image>
            <view class="dj">V{{ item.memberLevel }}</view>
            <image
              src="../../imges/nvsheng.png"
              class="sex"
              mode="aspectFill"
              v-if="item.sex == 2"
            ></image>
            <image
              src="../../imges/nansheng.png"
              class="sex"
              mode="aspectFill"
              v-if="item.sex == 1"
            ></image>
          </view>
          <view class="right">
            <view class="name">{{ item.realName }}</view>
            <view class="company">{{ item.company }}</view>
            <view class="zhiwei">{{ item.post }}</view>
          </view>
        </view>
        <view class="center">
          <view class="phone">
            <image src="../../imges/dianhua.png" mode="aspectFill"></image>
            <view class="">
              手机 : {{ item.telphone }}
              <!-- <text v-if="item.dealResult != 1" class="jiaohuan">（交换名片后可查看）</text> -->
            </view>
          </view>
          <view class="city">
            <image src="../../imges/chengshi.png" mode="aspectFill"></image>
            <text v-if="item.province || item.city"
              >城市 : {{ item.province }} {{ item.city }}</text
            >
            <view v-else>
              城市 :
              <text style="color: #999">暂未设置</text>
            </view>
          </view>
          <view class="email">
            <image src="../../imges/youxiang.png" mode="aspectFill"></image>
            <text>邮箱 : {{ item.mail ? item.mail : "暂未设置" }}</text>
          </view>
        </view>
        <view class="bottom">
          <view class="yiyunxu"><view class="heCard">看TA的名片</view></view>
        </view>
      </view>
      <!-- 帖子分享展示 -->
      <view class="tieziCard" v-if="item.businessType == 13">
        <view class="top">
          <view class="left"
            ><image :src="item.avatarUrl" mode="aspectFill"></image
          ></view>
          <view class="right">
            <view class="r-top">
              <text class="name">{{ item.realName }}</text>
              <text class="company">{{ item.company }}</text>
            </view>
            <view class="time">{{ item.message.showDate }}</view>
          </view>
        </view>
        <view @tap="toTrickDetail(item.message.id, item.id)" class="center">
          <view class="content">{{ item.message.content }}</view>
          <view class="img">
            <image
              v-if="item.message.imageUrl"
              :src="item.message.imageUrl"
              mode="aspectFill"
            ></image>
            <image
              v-else
              src="https://img.yiqilaiwang.com/icon-1024.png"
              mode="aspectFill"
            ></image>
          </view>
        </view>
        <view class="bottom">
          <view
            @tap="
              toDetail(item.message.orgId, item.id, item.org.firstDistribution)
            "
            class="org"
          >
            圈子:
            <image :src="item.message.orgUrl" mode="aspectFill"></image>
            <text class="orgName">{{ item.message.orgName }}</text>
          </view>
        </view>
      </view>
      <!-- 分享资讯展示 -->
      <view
        class="zixunCard"
        v-if="item.businessType == 1"
        @tap="joinZixun(item.message.id, item.id)"
      >
        <view class="top">
          <view class="left">{{ item.message.newsDigest }}</view>
          <view class="right">
            <image
              v-if="item.message.imageUrl"
              :src="item.message.imageUrl"
              mode="aspectFill"
            ></image>
            <image
              v-else
              src="https://img.yiqilaiwang.com/icon-1024.png"
              mode="aspectFill"
            ></image>
          </view>
        </view>
        <view class="bottom">
          <view class="left">
            <image :src="item.message.orgUrl" mode="aspectFill"></image>
            <view class="l-right">
              <view class="company">{{ item.message.orgName }}</view>
              <view class="bot"
                >会员 {{ item.message.userCount }} 帖子
                {{ item.message.postCount }}</view
              >
            </view>
          </view>
          <view class="right">
            <text>评论 {{ item.message.commentsNumber }}</text>
            <text class="time">{{ item.message.showDate }}</text>
          </view>
        </view>
        <!-- 跳app资讯 -->
        <view
          @tap="read(item.id)"
          class="mc"
          v-if="openApp.iswx == 'wx' && openApp.phone == 'Android'"
        >
          <wx-open-launch-app
            id="launch-btn"
            appid="wx8737e94836340f56"
            @error="openApp.handleErrorFn"
            @launch="openApp.handleLaunchFn"
            :extinfo="
              'yqlw://yilaiwang.com/openDetail?jumpType=1&serviceId=' +
              item.message.id +
              '&type=&orgId=&content='
            "
          >
            <script type="text/wxtag-template">
              <style>
                 	 .toapp{
                 		 display: block;
                 		 width: 343px;
                 		 height: 158px;
                 	 }
                  </style>
                 <view class="toapp"></view>
            </script>
          </wx-open-launch-app>
        </view>
      </view>
      <!-- 分享通知展示 -->
      <view
        class="tongzhiCard"
        v-if="item.businessType == 3"
        @tap="joinTongzhi(item.message.id, item.id)"
      >
        <view class="top">
          <view class="left">{{ item.message.newsDigest }}</view>
          <view class="right">
            <image
              v-if="item.message.imageUrl"
              :src="item.message.imageUrl"
              mode="aspectFill"
            ></image>
            <image
              v-else
              src="https://img.yiqilaiwang.com/icon-1024.png"
              mode="aspectFill"
            ></image>
          </view>
        </view>
        <view class="bottom">
          <view class="left">
            <image :src="item.message.orgUrl" mode="aspectFill"></image>
            <view class="l-right">
              <view class="company">{{ item.message.orgName }}</view>
              <view class="bot"
                >会员 {{ item.message.userCount }} 帖子
                {{ item.message.postCount }}</view
              >
            </view>
          </view>
          <view class="right">
            <text>评论 {{ item.message.commentsNumber }}</text>
            <text class="time">{{ item.message.showDate }}</text>
          </view>
        </view>
        <!-- 跳app通知 -->
        <view
          @tap="read(item.id)"
          class="mc"
          v-if="openApp.iswx == 'wx' && openApp.phone == 'Android'"
        >
          <wx-open-launch-app
            id="launch-btn"
            appid="wx8737e94836340f56"
            @error="openApp.handleErrorFn"
            @launch="openApp.handleLaunchFn"
            :extinfo="
              'yqlw://yilaiwang.com/openDetail?jumpType=3&serviceId=' +
              item.message.id +
              '&type=&orgId=&content='
            "
          >
            <script type="text/wxtag-template">
              <style>
                 	 .toapp{
                 		 display: block;
                 		 width: 343px;
                 		 height: 158px;
                 	 }
                  </style>
                 <view class="toapp"></view>
            </script>
          </wx-open-launch-app>
        </view>
      </view>
      <!-- 邀请加入组织展示 -->
      <view
        class="zuzhiCard"
        v-if="item.businessType == 6 && item.msgType == 8010"
        @tap="joinZuzhi(item.org.id, item.org.orgType, item.id)"
      >
        <view class="top">
          <view class="left"
            ><image :src="item.org.orgUrl" mode="aspectFill"></image
          ></view>
          <view class="rig">
            <text class="orgName">{{ item.org.orgName }}</text>
            <view class="center">
              <image :src="item.org.avatarUrl" mode="aspectFill"></image>
              <text class="name">{{ item.org.realName }}</text>
            </view>
            <view class="bott">
              <view class="people">
                <image src="../../imges/sjcy.png" mode="aspectFill"></image>
                <text>{{ item.org.userCount }}</text>
              </view>
              <view class="like">
                <image src="../../imges/sjgz.png" mode="aspectFill"></image>
                <text>{{ item.org.attentionCount }}</text>
              </view>
              <view class="num">
                <image src="../../imges/sjqz.png" mode="aspectFill"></image>
                <text>{{
                  item.org.circleNum + " / " + item.org.orgCircleNum
                }}</text>
              </view>
            </view>
          </view>
        </view>
        <view class="bottom">
          <!-- 初始 -->
          <view v-if="item.dealResult == 0" class="chushi">
            <view class="cha">
              <image src="../../imges/jujue.png" mode="aspectFill"></image>
              <text>拒绝</text>
            </view>
            <view class="gou">
              <image src="../../imges/gou.png" mode="aspectFill"></image>
              <text>立即加入</text>
            </view>
            <view class="heCard">进入组织</view>
          </view>
          <view v-if="item.dealResult != 0" class="yiyunxu">
            <view class="yunxu" v-if="item.dealResult == 1">
              <image src="../../imges/gou.png" mode="aspectFill"></image>
              <text>已同意</text>
            </view>
            <view class="jujue" v-if="item.dealResult == 2">
              <image src="../../imges/jujue.png" mode="aspectFill"></image>
              <text>已拒绝</text>
            </view>
            <view class="heCard">进入组织</view>
          </view>
        </view>
        <view
          class="out"
          v-if="item.dealResult == 0"
          @tap="jujueZuzhi(item.id)"
        ></view>
        <view
          class="mc"
          v-if="openApp.iswx == 'wx' && openApp.phone == 'Android'"
          @tap="read(item.id)"
        >
          <wx-open-launch-app
            id="launch-btn"
            appid="wx8737e94836340f56"
            @error="openApp.handleErrorFn"
            @launch="openApp.handleLaunchFn"
            :extinfo="
              'yqlw://yilaiwang.com/openDetail?jumpType=6&serviceId=' +
              item.org.id +
              '&type=' +
              item.org.orgType +
              '&orgId=' +
              item.id +
              '&content='
            "
          >
            <script type="text/wxtag-template">
              <style>
                 	 .toapp{
                 		 display: block;
                 		 width: 343px;
                 		 height: 147px;
                 	 }
                  </style>
                 <view class="toapp"></view>
            </script>
          </wx-open-launch-app>
        </view>
      </view>
      <!-- 邀请加入组织被同意被拒绝 -->
      <view
        class="qzCard1"
        v-if="item.businessType == 6 && item.msgType != 8010"
        @tap="toCard(item.senderId, item.id)"
      >
        <view class="c-top">
          <view class="left">
            <image :src="item.avatarUrl" class="tou" mode="aspectFill"></image>
            <view class="dj">V{{ item.memberLevel }}</view>
            <image
              src="../../imges/nvsheng.png"
              class="sex"
              mode="aspectFill"
              v-if="item.sex == 2"
            ></image>
            <image
              src="../../imges/nansheng.png"
              class="sex"
              mode="aspectFill"
              v-if="item.sex == 1"
            ></image>
          </view>
          <view class="right">
            <view class="name">{{ item.realName }}</view>
            <view class="company">{{ item.company }}</view>
            <view class="zhiwei">{{ item.post }}</view>
          </view>
        </view>
        <view class="center">
          <view class="phone">
            <image src="../../imges/dianhua.png" mode="aspectFill"></image>
            <view class="">
              手机 : {{ item.telphone }}
              <!-- <text v-if="item.dealResult != 1" class="jiaohuan">（交换名片后可查看）</text> -->
            </view>
          </view>
          <view class="city">
            <image src="../../imges/chengshi.png" mode="aspectFill"></image>
            <text v-if="item.province || item.city"
              >城市 : {{ item.province }} {{ item.city }}</text
            >
            <view v-else>
              城市 :
              <text style="color: #999">暂未设置</text>
            </view>
          </view>
          <view class="email">
            <image src="../../imges/youxiang.png" mode="aspectFill"></image>
            <text>邮箱 : {{ item.mail ? item.mail : "暂未设置" }}</text>
          </view>
        </view>
        <view class="bottom">
          <view class="yiyunxu"><view class="heCard">看TA的名片</view></view>
        </view>
      </view>
      <!-- 邀请参加活动展示 -->
      <view
        class="activeCard"
        v-if="item.businessType == 0 && item.msgType == 8013"
      >
        <view class="top" @tap="joinActive(item.act.id, item.id)">
          <image
            :src="item.act.actPoster"
            mode="aspectFill"
            class="beijing"
          ></image>
          <view class="mengcen"></view>
          <view class="text">
            <view class="title">{{ item.act.topic }}</view>
            <view class="time">
              <image src="../../imges/time.png" mode="aspectFill"></image>
              <text>{{ item.act.showDate }}</text>
            </view>
            <view class="address">
              <image src="../../imges/adress.png" mode="aspectFill"></image>
              <text>{{ item.act.actAddress }}</text>
            </view>
          </view>
          <view
            class="mc"
            v-if="openApp.iswx == 'wx' && openApp.phone == 'Android'"
            @tap="read(item.id)"
          >
            <wx-open-launch-app
              id="launch-btn"
              appid="wx8737e94836340f56"
              @error="openApp.handleErrorFn"
              @launch="openApp.handleLaunchFn"
              :extinfo="
                'yqlw://yilaiwang.com/openDetail?jumpType=0&serviceId=' +
                item.act.id +
                '&type=&orgId=' +
                item.id +
                '&content='
              "
            >
              <script type="text/wxtag-template">
                <style>
                   	 .toapp{
                   		 display: block;
                   		 width: 343px;
                   		 height: 190px;
                   	 }
                    </style>
                   <view class="toapp"></view>
              </script>
            </wx-open-launch-app>
          </view>
        </view>
        <view class="center">
          <view class="left" @tap="toCard(item.senderId, item.id)">
            <image :src="item.avatarUrl" mode="aspectFill"></image>
            <view class="xinxi">
              <view class="name">{{ item.realName }}</view>
              <view class="company">{{ item.company }}</view>
            </view>
          </view>
          <view class="right">
            <text class="people">成员 {{ item.act.number }}</text>
          </view>
        </view>
        <view class="bottom">
          <!-- 初始 -->
          <view
            v-if="item.dealResult == 0 && item.msgType == 8013"
            class="chushi"
          >
            <view class="cha">
              <image src="../../imges/jujue.png" mode="aspectFill"></image>
              <text @tap="jujueActive(item.id)">拒绝</text>
            </view>
            <view class="gou">
              <image src="../../imges/gou.png" mode="aspectFill"></image>
              <text
                @tap="joinActive(item.act.id, item.id)"
                v-if="openApp.phone == 'ios'"
                >参加活动</text
              >
              <view
                class=""
                v-if="openApp.iswx == 'wx' && openApp.phone == 'Android'"
                @tap="read(item.id)"
              >
                <wx-open-launch-app
                  id="launch-btn"
                  appid="wx8737e94836340f56"
                  @error="openApp.handleErrorFn"
                  @launch="openApp.handleLaunchFn"
                  :extinfo="
                    'yqlw://yilaiwang.com/openDetail?jumpType=0&serviceId=' +
                    item.act.id +
                    '&type=&orgId=' +
                    item.id +
                    '&content='
                  "
                >
                  <script type="text/wxtag-template">
                    <style>
                                   .act {
                    				display: block;
                    				font-size: 13px;
                    				font-family: PingFangSC-Medium, PingFang SC;
                    				font-weight: 500;
                    				color: #2168eb;
                                   }
                                 </style>
                                 <view class="act">参加活动</view>
                  </script>
                </wx-open-launch-app>
              </view>
            </view>
            <view class="heCard" @tap="toCard(item.senderId, item.id)"
              >看TA的名片</view
            >
          </view>
          <view v-if="item.dealResult != 0" class="yiyunxu">
            <view class="yunxu" v-if="item.dealResult == 1">
              <image src="../../imges/gou.png" mode="aspectFill"></image>
              <text>已参加</text>
            </view>
            <view class="jujue" v-if="item.dealResult == 2">
              <image src="../../imges/jujue.png" mode="aspectFill"></image>
              <text>已拒绝</text>
            </view>
            <view class="heCard" @tap="toCard(item.senderId, item.id)"
              >看TA的名片</view
            >
          </view>
        </view>
      </view>
      <!-- 活动被同意被拒绝 -->
      <view
        class="qzCard1"
        v-if="item.businessType == 0 && item.msgType != 8013"
        @tap="toCard(item.senderId, item.id)"
      >
        <view class="c-top">
          <view class="left">
            <image :src="item.avatarUrl" class="tou" mode="aspectFill"></image>
            <view class="dj">V{{ item.memberLevel }}</view>
            <image
              src="../../imges/nvsheng.png"
              class="sex"
              mode="aspectFill"
              v-if="item.sex == 2"
            ></image>
            <image
              src="../../imges/nansheng.png"
              class="sex"
              mode="aspectFill"
              v-if="item.sex == 1"
            ></image>
          </view>
          <view class="right">
            <view class="name">{{ item.realName }}</view>
            <view class="company">{{ item.company }}</view>
            <view class="zhiwei">{{ item.post }}</view>
          </view>
        </view>
        <view class="center">
          <view class="phone">
            <image src="../../imges/dianhua.png" mode="aspectFill"></image>
            <view class="">
              手机 : {{ item.telphone }}
              <!-- <text v-if="item.dealResult != 1" class="jiaohuan">（交换名片后可查看）</text> -->
            </view>
          </view>
          <view class="city">
            <image src="../../imges/chengshi.png" mode="aspectFill"></image>
            <text v-if="item.province || item.city"
              >城市 : {{ item.province }} {{ item.city }}</text
            >
            <view v-else>
              城市 :
              <text style="color: #999">暂未设置</text>
            </view>
          </view>
          <view class="email">
            <image src="../../imges/youxiang.png" mode="aspectFill"></image>
            <text>邮箱 : {{ item.mail ? item.mail : "暂未设置" }}</text>
          </view>
        </view>
        <view class="bottom">
          <view class="yiyunxu"><view class="heCard">看TA的名片</view></view>
        </view>
      </view>
    </view>
    <!-- 无消息 -->
    <view class="wu_Huo" v-if="xiaoxiData.length < 1">
      <image src="../../imges/shejiao_News.png" mode="aspectFill"></image>
      <text>暂无消息</text>
    </view>
  </view>
</template>

<script>
import request from "../../utils/request.js";
import "../../utils/toApp.js";
var jweixin = require("jweixin-module"); //配置
export default {
  data() {
    return {
      xiaoxiData: [],
      // pageNum: 1,
      pageSize: 10,
      wudata: true,
      is_data: false,
      bottom: false,
      is_jiaohuan: false,
      is_tongyi: false,
      is_jujue: false,
      is_jujueQz: false,
      is_jujueActive: false,
      is_jujueZuzhi: false,
      is_joinYes: false,
      is_yaoqingJoinQz: false,
      onMore: false,
      zhe_zhao: false,
    };
  },
  onReachBottom() {
    this.bottom = true;
    uni.showLoading({
      title: "加载中",
    });
    this.pageSize = this.pageSize + 10;
    this.listData();
  },
  onPullDownRefresh() {
    this.pageSize = 10;
    this.bottom = false;
    this.onMore = false;
    this.listData();
    setTimeout(() => {
      uni.stopPullDownRefresh();
      uni.showToast({
        title: "刷新成功",
        duration: 2000,
        icon: "none",
      });
    }, 1000);
  },
  onLoad() {
    this.configWeiXin1();
  },
  onShow() {
    this.bottom = false;
    this.zhe_zhao = false;
    this.listData();
  },
  computed: {
    // 控制显示三张图
    sliceImg() {
      return function (value) {
        return value.slice(0, 3);
      };
    },
    left() {
      return function (value) {
        if (value.length == 1) {
          return "45rpx";
        } else if (value.length == 2) {
          return "60rpx";
        } else {
          return "77rpx";
        }
      };
    },
  },
  methods: {
    handleLookZhe() {
      this.zhe_zhao = true;
    },
    handleCloseZhe() {
      this.zhe_zhao = false;
    },
    handleTui() {
      uni.navigateBack({
        delta: 1,
      });
    },
    oneEnterRead() {
      if (this.xiaoxiData.length == 0) {
        this.zhe_zhao = false;
        uni.showToast({
          title: "暂无社交消息",
          duration: 1500,
          icon: "none",
        });
        return false;
      }
      let token = uni.getStorageSync("token");
      const that = this;
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作！",
          duration: 2000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 2000);
      } else {
        request({
          url: "app/social/updateRead",
          method: "POST",
          header: {
            "content-type": "application/json;charset=UTF-8",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": "1.3.3",
            "Source-Type": 7,
            token: token,
          },
          data: {},
        }).then((res) => {
          if (res.data.code == 200) {
            that.listData();
            uni.showToast({
              title: "一键全读成功",
              duration: 2000,
              icon: "none",
            });
          } else if (res.data.code == 401) {
            uni.showToast({
              title: "登录失效，请重新授权登录！",
              duration: 2000,
              icon: "none",
            });
            setTimeout(() => {
              uni.navigateTo({
                url: "/pages/index/index",
              });
            }, 2000);
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
    },
    oneEnterDelect() {
      if (this.xiaoxiData.length == 0) {
        this.zhe_zhao = false;
        uni.showToast({
          title: "暂无社交消息",
          duration: 1500,
          icon: "none",
        });
        return false;
      }
      uni.showModal({
        title: "提示",
        content: "是否确认清除社交消息",
        confirmColor: "#000",
        cancelText: "再想想",
        cancelColor: "#007aff",
        success: (req) => {
          if (req.confirm) {
            let token = uni.getStorageSync("token");
            const that = this;
            if (!token) {
              uni.showToast({
                title: "请授权登录再操作！",
                duration: 2000,
                icon: "none",
              });
              setTimeout(() => {
                uni.navigateTo({
                  url: "/pages/index/index",
                });
              }, 2000);
            } else {
              request({
                url: "app/social/updateDel",
                method: "POST",
                header: {
                  "content-type": "application/json;charset=UTF-8",
                  "api-client": "72e0fee8172411ea995200163e05ff66",
                  "api-version": "1.3.3",
                  "Source-Type": 7,
                  token: token,
                },
                data: {},
              }).then((res) => {
                if (res.data.code == 200) {
                  that.listData();
                  uni.showToast({
                    title: "一键清除成功",
                    duration: 2000,
                    icon: "none",
                  });
                } else if (res.data.code == 401) {
                  uni.showToast({
                    title: "登录失效，请重新授权登录！",
                    duration: 2000,
                    icon: "none",
                  });
                  setTimeout(() => {
                    uni.navigateTo({
                      url: "/pages/index/index",
                    });
                  }, 2000);
                } else {
                  uni.showToast({
                    title: res.data.msg,
                    duration: 2000,
                    icon: "none",
                  });
                }
              });
            }
          } else if (req.cancel) {
            this.zhe_zhao = false;
          }
        },
      });
    },
    // 社交消息列表data
    listData() {
      let token = uni.getStorageSync("token");
      const that = this;
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作！",
          duration: 2000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 2000);
      } else {
        request({
          url: "app/social/list",
          method: "POST",
          header: {
            "content-type": "application/json;charset=UTF-8",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": "1.3.3",
            "Source-Type": 7,
            token: token,
          },
          data: {
            pageSize: this.pageSize,
            pageNumber: 1,
          },
        }).then((res) => {
          // if(that.pageNum > 1){
          // 	uni.showLoading({
          // 		title: '加载中'
          // 	});
          // }
          if (res.data.code == 200) {
            that.xiaoxiData = res.data.data.rows;
            if (res.data.data.total == 0) {
              uni.hideLoading();
              return false;
            }

            if (
              !that.onMore &&
              that.xiaoxiData.length >= res.data.data.total &&
              that.bottom
            ) {
              uni.hideLoading();
              uni.showToast({
                title: "加载完成",
                duration: 1000,
                icon: "none",
              });
              this.onMore = true;
              return false;
            }

            if (that.xiaoxiData.length >= res.data.data.total && that.bottom) {
              uni.hideLoading();
              uni.showToast({
                title: "没有更多数据了",
                duration: 1500,
                icon: "none",
              });
            } else if (
              that.xiaoxiData.length < res.data.data.total &&
              that.bottom
            ) {
              uni.hideLoading();
              uni.showToast({
                title: "加载完成",
                duration: 1000,
                icon: "none",
              });
            }
            // if (that.pageNum > 1 && type != 1) {
            // 	uni.showToast({
            // 		title: '加载完成',
            // 		duration: 1000,
            // 		icon: 'none'
            // 	});
            // 	that.xiaoxiData = [...that.xiaoxiData, ...res.data.data.rows];
            // } else {
            // 	that.xiaoxiData = res.data.data.rows;
            // }
            // if (res.data.data.rows.length < 1 && type != 1 && that.is_data) {
            // 	uni.showToast({
            // 		title: '没有更多数据了',
            // 		duration: 2000,
            // 		icon: 'none'
            // 	});
            // 	that.wudata = false;
            // }
          } else if (res.data.code == 401) {
            uni.showToast({
              title: "登录失效，请重新授权登录！",
              duration: 2000,
              icon: "none",
            });
            setTimeout(() => {
              uni.navigateTo({
                url: "/pages/index/index",
              });
            }, 2000);
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
    },
    // 跳名片页
    toCard(id, sjId) {
      uni.navigateTo({
        url: "/pages/index/personal?id=" + id,
      });
      this.read(sjId);
    },
    toTrickDetail(id, sjId) {
      uni.navigateTo({
        url: "/pages/index/trickDetail?id=" + id,
      });
      this.read(sjId);
    },
    toDetail(id, sjId, firstDistribution) {
      uni.navigateTo({
        url:
          "/pages/index/detail?id=" +
          id +
          "&socialId=" +
          sjId +
          "&firstDistribution=" +
          firstDistribution,
      });
      this.read(sjId);
    },
    configWeiXin1() {
      //获取公众号配置
      request({
        //获取appid
        url: "wechat/portal/jsapiSignature/",
        method: "POST",
        header: {
          "Content-Type": "application/json",
          "api-client": "72e0fee8172411ea995200163e05ff66",
          "api-version": "1.3.3",
          "Source-Type": 7,
        },
        data: {
          url: window.location.href.split("#")[0], //后台通过域名进行授权
        },
      }).then((res) => {
        if (res.statusCode == 200) {
          //获取成功
          jweixin.config({
            debug: false, // 开启调试模式，发布的时候改为false
            appId: res.data.appId, // 必填，公众号的唯一标识
            timestamp: res.data.timestamp, // 必填，生成签名的时间戳
            nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
            signature: res.data.signature, // 必填，签名
            jsApiList: ["updateAppMessageShareData", "updateTimelineShareData"], // 必填，需要使用的JS接口列表
            openTagList: ["wx-open-launch-app"],
          });
          jweixin.ready(function () {});
        } else {
          uni.showToast({
            title: res.data.msg,
            duration: 2000,
            icon: "none",
          });
        }
      });
    },
    // 跳app组织
    joinZuzhi(id, type, sjId) {
      if (this.openApp.phone == "ios") {
        uni.showModal({
          title: "前往APP",
          content: "即将离开微信，打开“一起来往”查看组织",
          confirmText: "允许",
          success: (res) => {
            if (res.confirm) {
              uni.showLoading({
                title: "加载中，请稍等~",
              });
              setTimeout(function () {
                uni.hideLoading();
              }, 3000);
              var url = window.location.href.split("&code")[0];
              window.history.pushState({}, 0, url);
              this.openApp.toApps(6, id, type, sjId, "");
            }
          },
        });
      }
      this.read(sjId);
    },
    // 跳app活动详情
    joinActive(id, sjId) {
      if (this.openApp.phone == "ios") {
        uni.showModal({
          title: "前往APP",
          content: "即将离开微信，打开“一起来往”查看活动详情",
          confirmText: "允许",
          success: (res) => {
            if (res.confirm) {
              uni.showLoading({
                title: "加载中，请稍等~",
              });
              setTimeout(function () {
                uni.hideLoading();
              }, 3000);
              var url = window.location.href.split("&code")[0];
              window.history.pushState({}, 0, url);
              this.openApp.toApps(0, id, "", sjId, "");
            }
          },
        });
      }
      this.read(sjId);
    },
    // 跳app通知
    joinTongzhi(id, sjId) {
      if (this.openApp.phone == "ios") {
        uni.showModal({
          title: "前往APP",
          content: "即将离开微信，打开“一起来往”查看通知详情",
          confirmText: "允许",
          success: (res) => {
            if (res.confirm) {
              uni.showLoading({
                title: "加载中，请稍等~",
              });
              setTimeout(function () {
                uni.hideLoading();
              }, 3000);
              var url = window.location.href.split("&code")[0];
              window.history.pushState({}, 0, url);
              this.openApp.toApps(3, id, "", "", "");
            }
          },
        });
      }
      this.read(sjId);
    },
    // 跳app资讯
    joinZixun(id, sjId) {
      if (this.openApp.phone == "ios") {
        uni.showModal({
          title: "前往APP",
          content: "即将离开微信，打开“一起来往”查看资讯详情",
          confirmText: "允许",
          success: (res) => {
            if (res.confirm) {
              uni.showLoading({
                title: "加载中，请稍等~",
              });
              setTimeout(function () {
                uni.hideLoading();
              }, 3000);
              var url = window.location.href.split("&code")[0];
              window.history.pushState({}, 0, url);
              this.openApp.toApps(1, id, "", "", "");
            }
          },
        });
      }
      this.read(sjId);
    },
    // 已读消息
    read(id) {
      let token = uni.getStorageSync("token");
      const that = this;
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作！",
          duration: 2000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 2000);
      } else {
        request({
          url: "app/social/updateReadById",
          method: "POST",
          header: {
            "content-type": "application/json;charset=UTF-8",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": "1.3.3",
            "Source-Type": 7,
            token: token,
          },
          data: {
            id: id,
          },
        }).then((res) => {
          if (res.data.code == 200) {
            that.bottom = false;
            that.listData();
          } else if (res.data.code == 401) {
            uni.showToast({
              title: "登录失效，请重新授权登录！",
              duration: 2000,
              icon: "none",
            });
            setTimeout(() => {
              uni.navigateTo({
                url: "/pages/index/index",
              });
            }, 2000);
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
    },
    // 交换名片
    jiaohuan(id) {
      if (this.is_jiaohuan) {
        uni.showToast({
          title: "已提交申请，请勿重复操作",
          duration: 2000,
          icon: "none",
        });
        return false;
      }
      let token = uni.getStorageSync("token");
      const that = this;
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作！",
          duration: 2000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 2000);
      } else {
        request({
          url: "app/userCard/userExchangeCard",
          method: "POST",
          header: {
            "content-type": "application/json;charset=UTF-8",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": "1.3.3",
            "Source-Type": 7,
            token: token,
          },
          data: {
            viewUid: id,
          },
        }).then((res) => {
          if (res.data.code == 200) {
            that.is_jiaohuan = true;
            uni.showToast({
              title: "交换名片成功",
              duration: 2000,
              icon: "none",
            });
            that.bottom = false;
            that.listData();
          } else if (res.data.code == 401) {
            uni.showToast({
              title: "登录失效，请重新授权登录！",
              duration: 2000,
              icon: "none",
            });
            setTimeout(() => {
              uni.navigateTo({
                url: "/pages/index/index",
              });
            }, 2000);
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
      this.read(id);
    },
    // 同意交换名片
    tongyi(id) {
      if (this.is_tongyi) {
        uni.showToast({
          title: "已提交申请，请勿重复操作",
          duration: 2000,
          icon: "none",
        });
        return false;
      }
      let token = uni.getStorageSync("token");
      const that = this;
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作！",
          duration: 2000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 2000);
      } else {
        request({
          url: "app/userCard/agreeExchangeCard",
          method: "POST",
          header: {
            "content-type": "application/json;charset=UTF-8",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": "1.3.3",
            "Source-Type": 7,
            token: token,
          },
          data: {
            id: id,
          },
        }).then((res) => {
          if (res.data.code == 200) {
            that.is_tongyi = true;
            uni.showToast({
              title: "同意交换名片成功",
              duration: 2000,
              icon: "none",
            });
            that.bottom = false;
            that.listData();
          } else if (res.data.code == 401) {
            uni.showToast({
              title: "登录失效，请重新授权登录！",
              duration: 2000,
              icon: "none",
            });
            setTimeout(() => {
              uni.navigateTo({
                url: "/pages/index/index",
              });
            }, 2000);
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
      this.read(id);
    },
    // 拒绝交换名片
    jujue(id) {
      if (this.is_jujue) {
        uni.showToast({
          title: "已提交申请，请勿重复操作",
          duration: 2000,
          icon: "none",
        });
        return false;
      }
      let token = uni.getStorageSync("token");
      const that = this;
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作！",
          duration: 2000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 2000);
      } else {
        request({
          url: "app/userCard/refuseExchangeCard",
          method: "POST",
          header: {
            "content-type": "application/json;charset=UTF-8",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": "1.3.3",
            "Source-Type": 7,
            token: token,
          },
          data: {
            id: id,
          },
        }).then((res) => {
          if (res.data.code == 200) {
            that.is_jujue = true;
            uni.showToast({
              title: "拒绝交换成功",
              duration: 2000,
              icon: "none",
            });
            that.bottom = false;
            that.listData();
          } else if (res.data.code == 401) {
            uni.showToast({
              title: "登录失效，请重新授权登录！",
              duration: 2000,
              icon: "none",
            });
            setTimeout(() => {
              uni.navigateTo({
                url: "/pages/index/index",
              });
            }, 2000);
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
      this.read(id);
    },
    // 拒绝加入圈子
    jujueQz(id) {
      if (this.is_jujueQz) {
        uni.showToast({
          title: "已提交申请，请勿重复操作",
          duration: 2000,
          icon: "none",
        });
        return false;
      }
      let token = uni.getStorageSync("token");
      const that = this;
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作！",
          duration: 2000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 2000);
      } else {
        request({
          url: "app/orgCircle/refuseJoinCircle",
          method: "POST",
          header: {
            "content-type": "application/json;charset=UTF-8",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": "1.3.3",
            "Source-Type": 7,
            token: token,
          },
          data: {
            id: id,
          },
        }).then((res) => {
          if (res.data.code == 200) {
            that.is_jujueQz = true;
            uni.showToast({
              title: "拒绝加入圈子成功",
              duration: 2000,
              icon: "none",
            });
            that.bottom = false;
            that.listData();
          } else if (res.data.code == 401) {
            uni.showToast({
              title: "登录失效，请重新授权登录！",
              duration: 2000,
              icon: "none",
            });
            setTimeout(() => {
              uni.navigateTo({
                url: "/pages/index/index",
              });
            }, 2000);
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
      this.read(id);
    },
    // 拒绝加入活动
    jujueActive(id) {
      if (this.is_jujueActive) {
        uni.showToast({
          title: "已提交申请，请勿重复操作",
          duration: 2000,
          icon: "none",
        });
        return false;
      }
      let token = uni.getStorageSync("token");
      const that = this;
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作！",
          duration: 2000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 2000);
      } else {
        request({
          url: "/app/org/refuseJoinCircle",
          method: "POST",
          header: {
            "content-type": "application/json;charset=UTF-8",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": "1.3.3",
            "Source-Type": 7,
            token: token,
          },
          data: {
            id: id,
          },
        }).then((res) => {
          if (res.data.code == 200) {
            that.is_jujueActive = true;
            uni.showToast({
              title: "拒绝参加活动成功",
              duration: 2000,
              icon: "none",
            });
            that.bottom = false;
            that.listData();
          } else if (res.data.code == 401) {
            uni.showToast({
              title: "登录失效，请重新授权登录！",
              duration: 2000,
              icon: "none",
            });
            setTimeout(() => {
              uni.navigateTo({
                url: "/pages/index/index",
              });
            }, 2000);
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
      this.read(id);
    },
    // 拒绝加入组织
    jujueZuzhi(id) {
      if (this.is_jujueZuzhi) {
        uni.showToast({
          title: "已提交申请，请勿重复操作",
          duration: 2000,
          icon: "none",
        });
        return false;
      }
      let token = uni.getStorageSync("token");
      const that = this;
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作！",
          duration: 2000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 2000);
      } else {
        request({
          url: "/app/org/refuseJoinCircle",
          method: "POST",
          header: {
            "content-type": "application/json;charset=UTF-8",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": "1.3.3",
            "Source-Type": 7,
            token: token,
          },
          data: {
            id: id,
          },
        }).then((res) => {
          if (res.data.code == 200) {
            that.is_jujueZuzhi = true;
            uni.showToast({
              title: "拒绝加入组织成功",
              duration: 2000,
              icon: "none",
            });
            that.bottom = false;
            that.listData();
          } else if (res.data.code == 401) {
            uni.showToast({
              title: "登录失效，请重新授权登录！",
              duration: 2000,
              icon: "none",
            });
            setTimeout(() => {
              uni.navigateTo({
                url: "/pages/index/index",
              });
            }, 2000);
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
      this.read(id);
    },
    //不收费的圈子加入
    joinYes(orgid, id) {
      if (this.is_joinYes) {
        uni.showToast({
          title: "已提交申请，请勿重复操作",
          duration: 2000,
          icon: "none",
        });
        return false;
      }
      const that = this;
      let token = uni.getStorageSync("token");
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作！",
          duration: 2000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 2000);
      } else {
        request({
          url: "app/orgCircle/applyJoinFriends",
          method: "POST",
          header: {
            "Content-Type": "application/json",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": "1.3.3",
            "Source-Type": 7,
            token: token,
          },

          data: {
            orgId: orgid,
            socialId: id,
          },
        }).then((res) => {
          if (res.data.code == 200) {
            that.is_joinYes = true;
            uni.showToast({
              title: "加入圈子成功",
              duration: 2000,
              icon: "none",
            });
            setTimeout(() => {
              uni.navigateTo({
                url: "/pages/index/detail?id=" + orgid,
              });
            }, 1500);
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
    },
    // 同意加入圈子
    joinQz(orgid, id, firstDistribution) {
      const that = this;
      let token = uni.getStorageSync("token");
      uni.showLoading({
        title: "加载中",
      });
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作！",
          duration: 2000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 2000);
      } else {
        request({
          url: "app/orgCircle/friendsHomeInfo",
          method: "POST",
          header: {
            "Content-Type": "application/json",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": "1.3.3",
            "Source-Type": 7,
            token: token,
          },
          data: {
            orgId: orgid,
          },
        }).then((res) => {
          if (res.data.code == 200) {
            // 缴费圈子
            if (res.data.data.isUserFriendsPay == 1) {
              uni.navigateTo({
                url:
                  "/pages/index/detail?id=" +
                  orgid +
                  "&socialId=" +
                  id +
                  "&firstDistribution=" +
                  firstDistribution,
              });
            }
            // 普通圈子
            if (res.data.data.isUserFriendsPay == 0) {
              that.joinYes(orgid, id);
            }
            // uni.showToast({
            //     title: '加入圈子成功',
            //     duration: 2000,
            //     icon: 'none'
            // });
          } else if (res.data.code == 401) {
            uni.showToast({
              title: "登录失效，请重新授权登录！",
              duration: 2000,
              icon: "none",
            });
            setTimeout(() => {
              uni.navigateTo({
                url: "/pages/index/index",
              });
            }, 2000);
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
      this.read(id);
    },
    // 邀请加入圈子
    yaoqingJoinQz(id, senderId, sjId) {
      if (this.is_yaoqingJoinQz) {
        uni.showToast({
          title: "已提交申请，请勿重复操作",
          duration: 2000,
          icon: "none",
        });
        return false;
      }
      let token = uni.getStorageSync("token");
      let userList = [];
      userList.push(senderId);
      const that = this;
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作！",
          duration: 2000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 2000);
      } else {
        request({
          url: "app/orgMessage/shareGenerateSocialMessage",
          method: "POST",
          header: {
            "content-type": "application/json;charset=UTF-8",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": "1.3.3",
            "Source-Type": 7,
            token: token,
          },
          data: {
            socialMessage: {
              msgType: 8007,
              relationId: id,
              businessType: 12,
            },
            userList: userList,
          },
        }).then((res) => {
          if (res.data.code == 200) {
            that.yaoqingJoinQz = true;
            uni.showToast({
              title: "邀请成功",
              duration: 2000,
              icon: "none",
            });
            that.bottom = false;
            that.listData();
          } else if (res.data.code == 401) {
            uni.showToast({
              title: "登录失效，请重新授权登录！",
              duration: 2000,
              icon: "none",
            });
            setTimeout(() => {
              uni.navigateTo({
                url: "/pages/index/index",
              });
            }, 2000);
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
      this.read(sjId);
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  // height: 100vh;
  padding: 0 32rpx;
  padding-bottom: 40rpx;
  position: relative;
  box-sizing: border-box;
  padding-top: 100rpx;
  .roof {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    padding: 25rpx 35rpx;
    border-bottom: 2rpx solid #dddddd;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    width: 750rpx;
    box-sizing: border-box;

    .left {
      font-size: 36rpx;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: rgba(0, 0, 0, 1);

      image {
        width: 28rpx;
        height: 28rpx;
        margin-right: 12rpx;
        vertical-align: center;
      }

      text {
        display: inline-block;
        position: relative;
        top: -3rpx;
      }
    }

    .right {
      margin-top: -30rpx;
      height: 41rpx;
      width: 41rpx;
    }
  }

  .zhe {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.2);

    .child {
      position: absolute;
      top: 90rpx;
      right: 35rpx;
      width: 180rpx;
      // height: 320rpx;
      background-color: #fff;
      border-radius: 10rpx;
      padding: 0 20rpx;
      box-sizing: border-box;

      .read {
        padding: 15rpx 0;
        font-size: 28rpx;
        width: 100%;
        text-align: center;
        border-bottom: 2rpx solid #eee;
      }
      .delect {
        padding: 15rpx 0;
        font-size: 28rpx;
        width: 100%;
        text-align: center;
      }
      .jiao {
        height: 0;
        width: 0;
        border-bottom: 15rpx solid #fff;
        border-left: 7.5rpx solid transparent;
        border-right: 7.5rpx solid transparent;
        position: absolute;
        right: 16rpx;
        top: -15rpx;
      }
    }
  }
  .wu_Huo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 350rpx;

    image {
      margin-top: 80rpx;
      width: 230rpx;
      height: 200rpx;
      margin-bottom: 10rpx;
    }

    text {
      margin-top: 10rpx;
      font-size: 28rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(136, 136, 136, 1);
      line-height: 37px;
    }
  }

  .xian {
    width: 100%;
    height: 1rpx;
    position: fixed;
    top: 86rpx;
    left: 0;
    background-color: #ddd;
  }

  .list {
    margin-bottom: 53rpx;

    .top {
      padding: 33rpx 0 15rpx 0;

      .top1 {
        display: flex;

        // align-items: center;
        .dian {
          width: 12rpx;
          height: 12rpx;
          background: #2168eb;
          border-radius: 50%;
          margin-right: 15rpx;
          margin-top: 15rpx;
        }

        .activeDian {
          width: 12rpx;
          height: 12rpx;
          background: #b8b8b8;
          border-radius: 50%;
          margin-right: 15rpx;
          margin-top: 15rpx;
        }

        .text {
          font-size: 32rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #333333;
        }
      }

      .time {
        height: 37rpx;
        font-size: 26rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #888888;
        line-height: 37rpx;
        margin-left: 27rpx;
      }
    }

    .card {
      width: 686rpx;
      height: 498rpx;
      background: #ffffff;
      box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(0, 0, 0, 0.16);
      border-radius: 12rpx;
      padding: 0 32rpx;
      box-sizing: border-box;

      .c-top {
        width: 622rpx;
        height: 182rpx;
        border-bottom: 1rpx solid #eeeeee;
        padding: 0 23rpx;
        box-sizing: border-box;
        display: flex;
        align-items: center;

        .left {
          width: 123rpx;
          height: 123rpx;
          position: relative;
          margin-right: 37rpx;

          .tou {
            width: 123rpx;
            height: 123rpx;
            border-radius: 50%;
          }

          .dj {
            width: 48rpx;
            height: 28rpx;
            background-color: #dab780;
            color: #ffffff;
            font-size: 26rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            border-radius: 8rpx;
            text-align: center;
            line-height: 28rpx;
            position: absolute;
            bottom: -12rpx;
            left: 22rpx;
          }

          .sex {
            width: 28rpx;
            height: 28rpx;
            position: absolute;
            bottom: -12rpx;
            right: 18rpx;
          }
        }

        .right {
          display: flex;
          flex-direction: column;
          justify-content: center;
          padding-top: 20rpx;

          .name {
            font-size: 36rpx;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #141414;
            line-height: 50rpx;
          }

          .company,
          .zhiwei {
            font-size: 26rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #9e9e9e;
            line-height: 37rpx;
          }
        }
      }

      .center {
        width: 622rpx;
        height: 227rpx;
        font-size: 26rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
        padding: 34rpx 0;
        margin-left: 11rpx;
        box-sizing: border-box;

        .phone {
          display: flex;

          image {
            width: 30rpx;
            height: 28rpx;
            margin-right: 25rpx;
          }

          .jiaohuan {
            font-size: 24rpx;
            color: #2168eb;
          }
        }

        .city {
          display: flex;
          margin: 24rpx 0;

          image {
            width: 25rpx;
            height: 29rpx;
            margin-right: 31rpx;
          }
        }

        .email {
          display: flex;
          align-items: center;

          image {
            width: 26rpx;
            height: 21rpx;
            margin-right: 29rpx;
          }
        }
      }

      .bottom {
        width: 622rpx;
        height: 87rpx;
        border-top: 1rpx solid #eeeeee;

        .chushi {
          height: 87rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-size: 26rpx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          padding: 0 19rpx;
          box-sizing: border-box;

          .cha {
            color: #f14a36;

            image {
              width: 20rpx;
              height: 20rpx;
              margin-right: 21rpx;
            }
          }

          .gou {
            color: #2168eb;

            image {
              width: 25rpx;
              height: 15rpx;
              margin-right: 21rpx;
            }
          }

          .heCard {
            color: #2168eb;
          }
        }

        .beitongyi {
          height: 87rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 26rpx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          box-sizing: border-box;

          .heCard {
            width: 50%;
            height: 87rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #2168eb;
          }
        }

        .beijujue {
          height: 87rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-size: 26rpx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          box-sizing: border-box;

          .gou {
            width: 50%;
            height: 87rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #2168eb;

            image {
              width: 25rpx;
              height: 15rpx;
              margin-right: 21rpx;
            }
          }

          .heCard {
            width: 50%;
            height: 87rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #2168eb;
          }
        }

        .yiyunxu {
          height: 87rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-size: 26rpx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          box-sizing: border-box;

          .yunxu {
            width: 50%;
            height: 87rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #2168eb;
            background-color: #ffffff;
            opacity: 0.5;

            image {
              width: 25rpx;
              height: 15rpx;
              margin-right: 21rpx;
            }
          }

          .jujue {
            width: 50%;
            height: 87rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #f14a36;
            background-color: #ffffff;
            opacity: 0.5;

            image {
              width: 25rpx;
              height: 15rpx;
              margin-right: 21rpx;
            }
          }

          .heCard {
            width: 50%;
            height: 87rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #2168eb;
          }
        }
      }
    }

    .qzCard1 {
      width: 686rpx;
      height: 498rpx;
      background: #ffffff;
      box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(0, 0, 0, 0.16);
      border-radius: 12rpx;
      padding: 0 32rpx;
      box-sizing: border-box;

      .c-top {
        width: 622rpx;
        height: 182rpx;
        border-bottom: 1rpx solid #eeeeee;
        padding: 0 23rpx;
        box-sizing: border-box;
        display: flex;
        align-items: center;

        .left {
          width: 123rpx;
          height: 123rpx;
          position: relative;
          margin-right: 37rpx;

          .tou {
            width: 123rpx;
            height: 123rpx;
            border-radius: 50%;
          }

          .dj {
            width: 48rpx;
            height: 28rpx;
            background-color: #dab780;
            color: #ffffff;
            font-size: 26rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            border-radius: 8rpx;
            text-align: center;
            line-height: 28rpx;
            position: absolute;
            bottom: -12rpx;
            left: 22rpx;
          }

          .sex {
            width: 28rpx;
            height: 28rpx;
            position: absolute;
            bottom: -12rpx;
            right: 18rpx;
          }
        }

        .right {
          display: flex;
          flex-direction: column;
          justify-content: center;
          padding-top: 20rpx;

          .name {
            font-size: 36rpx;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #141414;
            line-height: 50rpx;
          }

          .company,
          .zhiwei {
            font-size: 26rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #9e9e9e;
            line-height: 37rpx;
          }
        }
      }

      .center {
        width: 622rpx;
        height: 227rpx;
        font-size: 26rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
        padding: 34rpx 0;
        margin-left: 11rpx;
        box-sizing: border-box;

        .phone {
          display: flex;

          image {
            width: 30rpx;
            height: 28rpx;
            margin-right: 25rpx;
          }

          .jiaohuan {
            font-size: 24rpx;
            color: #2168eb;
          }
        }

        .city {
          display: flex;
          margin: 24rpx 0;

          image {
            width: 25rpx;
            height: 29rpx;
            margin-right: 31rpx;
          }
        }

        .email {
          display: flex;
          align-items: center;

          image {
            width: 26rpx;
            height: 21rpx;
            margin-right: 29rpx;
          }
        }
      }

      .bottom {
        width: 622rpx;
        height: 87rpx;
        border-top: 1rpx solid #eeeeee;

        .yiyunxu {
          height: 87rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 26rpx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          box-sizing: border-box;

          .heCard {
            width: 50%;
            height: 87rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #2168eb;
          }
        }
      }
    }

    .qzCard {
      width: 686rpx;
      background: #ffffff;
      box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(0, 0, 0, 0.16);
      border-radius: 12rpx;
      padding: 0 20rpx;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .c-top {
        width: 622rpx;
        box-sizing: border-box;
        display: flex;
        padding: 20rpx 0;

        .left {
          margin-right: 22rpx;

          image {
            width: 96rpx;
            height: 96rpx;
            border-radius: 50%;
          }
        }

        .right {
          display: flex;
          flex-direction: column;
          position: relative;

          // justify-content: center;
          // padding-top: 20rpx;
          .name {
            height: 45rpx;
            font-size: 32rpx;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #333333;
          }

          .friendsTopic {
            font-size: 24rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #888888;
            margin: 5rpx 0 10rpx 0;
          }

          .num {
            font-size: 24rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #888888;
            display: flex;
            align-items: center;
            position: relative;

            .cy {
              margin-right: 7rpx;
            }

            image {
              width: 35rpx;
              height: 35rpx;
              border-radius: 50%;
            }
          }

          .kongbiaoqian {
            height: 26rpx;
            line-height: 26rpx;
            padding: 5rpx 10rpx;
            margin-top: 12rpx;
          }

          .biaoqian {
            height: 26rpx;
            line-height: 26rpx;
            background: #ffe7e4;
            padding: 5rpx 10rpx;
            font-size: 18rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #bf6c67;
            margin-top: 12rpx;
            border-radius: 13rpx;
            position: absolute;
            top: 130rpx;
            left: 0;
            // white-space:nowrap;
          }
        }
      }

      .center {
        width: 622rpx;
        height: 87rpx;
        display: flex;
        align-items: center;
        font-size: 26rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
        box-sizing: border-box;
        border-top: 1rpx solid #eeeeee;

        image {
          width: 61rpx;
          height: 61rpx;
          border-radius: 50%;
          margin-right: 13rpx;
        }

        .right {
          display: flex;
          flex-direction: column;
          justify-content: center;

          .name {
            height: 33rpx;
            font-size: 24rpx;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #333333;
            line-height: 33rpx;
          }

          .company {
            height: 28rpx;
            font-size: 20rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #888888;
            line-height: 28rpx;
          }
        }
      }

      .bottom {
        width: 622rpx;
        height: 87rpx;
        border-top: 1rpx solid #eeeeee;

        .chushi {
          height: 87rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-size: 26rpx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          padding: 0 19rpx;
          box-sizing: border-box;

          .cha {
            color: #f14a36;

            image {
              width: 20rpx;
              height: 20rpx;
              margin-right: 21rpx;
            }
          }

          .gou {
            color: #2168eb;

            image {
              width: 25rpx;
              height: 15rpx;
              margin-right: 21rpx;
            }
          }

          .heCard {
            color: #2168eb;
          }
        }

        .beitongyi {
          height: 87rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 26rpx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          box-sizing: border-box;

          .heCard {
            width: 50%;
            height: 87rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #2168eb;
          }
        }

        .beijujue {
          height: 87rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-size: 26rpx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          box-sizing: border-box;

          .gou {
            width: 50%;
            height: 87rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #2168eb;

            image {
              width: 25rpx;
              height: 15rpx;
              margin-right: 21rpx;
            }
          }

          .heCard {
            width: 50%;
            height: 87rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #2168eb;
          }
        }

        .yiyunxu {
          height: 87rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-size: 26rpx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          box-sizing: border-box;

          .yunxu {
            width: 50%;
            height: 87rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #2168eb;
            background-color: #ffffff;
            opacity: 0.5;

            image {
              width: 25rpx;
              height: 15rpx;
              margin-right: 21rpx;
            }
          }

          .jujue {
            width: 50%;
            height: 87rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #f14a36;
            background-color: #ffffff;
            opacity: 0.5;

            image {
              width: 25rpx;
              height: 15rpx;
              margin-right: 21rpx;
            }
          }

          .heCard {
            width: 50%;
            height: 87rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #2168eb;
          }
        }
      }
    }

    .tieziCard {
      width: 686rpx;
      height: 410rpx;
      background: #ffffff;
      box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(0, 0, 0, 0.16);
      border-radius: 12rpx;
      box-sizing: border-box;

      // display: flex;
      // flex-direction: column;
      // justify-content: space-between;
      .top {
        height: 80rpx;
        padding: 26rpx 20rpx 19rpx 20rpx;
        display: flex;

        .left {
          width: 80rpx;
          height: 80rpx;
          margin-right: 20rpx;

          image {
            width: 80rpx;
            height: 80rpx;
          }
        }

        .right {
          height: 80rpx;
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .r-top {
            display: flex;
            align-items: flex-start;

            .name {
              font-size: 28rpx;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 500;
              color: #333333;
            }

            .company {
              font-size: 24rpx;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #888888;
              margin-left: 15rpx;
            }
          }

          .time {
            font-size: 22rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #888888;
            margin: 0;
          }
        }
      }

      .center {
        height: 148rpx;
        padding: 0 20rpx 37rpx 20rpx;
        display: flex;
        justify-content: space-between;
        border-bottom: 1rpx solid #eeeeee;

        .content {
          width: 468rpx;
          height: 148rpx;
          font-size: 26rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          line-height: 37rpx;
          color: #333333;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 4;
          overflow: hidden;
        }

        .img {
          width: 140rpx;
          height: 140rpx;

          image {
            width: 140rpx;
            height: 140rpx;
            border-radius: 8rpx;
          }
        }
      }

      .bottom {
        padding: 0 20rpx;

        .org {
          height: 46rpx;
          padding: 0 20rpx;
          line-height: 46rpx;
          display: inline-block;
          background: linear-gradient(
            90deg,
            rgba(255, 197, 79, 0.08) 0%,
            rgba(255, 197, 79, 0.08) 100%
          );
          border-radius: 23rpx;
          // opacity: 0.08;
          font-size: 20rpx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #ff724f;
          position: relative;
          margin-top: 26rpx;

          image {
            width: 32rpx;
            height: 32rpx;
            border-radius: 16rpx;
            // margin: 0 6rpx 0 10rpx;
            position: absolute;
            left: 85rpx;
            top: 7rpx;
          }

          .orgName {
            font-size: 24rpx;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #333333;
            margin-left: 50rpx;
          }
        }
      }
    }

    .activeCard {
      width: 686rpx;
      background: #ffffff;
      box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(0, 0, 0, 0.16);
      border-radius: 12rpx;
      box-sizing: border-box;

      .top {
        // width: 686rpx;
        height: 380rpx;
        padding: 0;
        position: relative;

        .beijing {
          width: 100%;
          height: 380rpx;
          border-top-left-radius: 12rpx;
          border-top-right-radius: 12rpx;
        }

        .mengcen {
          width: 100%;
          height: 225rpx;
          position: absolute;
          left: 0;
          bottom: 0;
          background: linear-gradient(
            180deg,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0.9) 100%
          );
          box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(255, 255, 255, 0.1);
          opacity: 0.72;
          box-sizing: border-box;
          z-index: 1;
        }

        .mc {
          width: 100%;
          height: 380rpx;
          position: absolute;
          left: 0;
          top: 0;
          z-index: 9;
        }

        .text {
          width: 100%;
          height: 225rpx;
          position: absolute;
          left: 0;
          bottom: 0;
          padding: 44rpx 30rpx 0 30rpx;
          box-sizing: border-box;
          z-index: 2;

          .title {
            font-size: 34rpx;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: bold;
            color: #ffffff;
            line-height: 48rpx;
          }

          .time {
            display: flex;
            align-items: center;
            margin: 9rpx 0 8rpx 0;

            image {
              width: 23rpx;
              height: 23rpx;
            }

            text {
              font-size: 24rpx;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #ffffff;
              line-height: 33rpx;
              margin-left: 14rpx;
            }
          }

          .address {
            display: flex;
            align-items: center;

            image {
              width: 21rpx;
              height: 26rpx;
            }

            text {
              font-size: 24rpx;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #ffffff;
              line-height: 33rpx;
              margin-left: 16rpx;
            }
          }
        }
      }

      .center {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 21rpx 30rpx 31rpx;

        .left {
          display: flex;

          .xinxi {
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .name {
              font-size: 24rpx;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #333333;
            }

            .company {
              font-size: 20rpx;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #888888;
            }
          }

          image {
            width: 60rpx;
            height: 60rpx;
            border-radius: 30rpx;
            margin-right: 14rpx;
          }
        }

        .right {
          font-size: 24rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #888888;
        }
      }

      .bottom {
        width: 622rpx;
        height: 87rpx;
        border-top: 1rpx solid #eeeeee;
        padding: 0 30rpx;

        .chushi {
          height: 87rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-size: 26rpx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          padding: 0 19rpx;
          box-sizing: border-box;

          .cha {
            color: #f14a36;

            image {
              width: 20rpx;
              height: 20rpx;
              margin-right: 21rpx;
            }
          }

          .gou {
            display: flex;
            align-items: center;
            color: #2168eb;

            image {
              width: 25rpx;
              height: 15rpx;
              margin-right: 21rpx;
            }
          }

          .heCard {
            color: #2168eb;
          }
        }

        .beitongyi {
          height: 87rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 26rpx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          box-sizing: border-box;

          .heCard {
            width: 50%;
            height: 87rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #2168eb;
          }
        }

        .beijujue {
          height: 87rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-size: 26rpx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          box-sizing: border-box;

          .gou {
            width: 50%;
            height: 87rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #2168eb;

            image {
              width: 25rpx;
              height: 15rpx;
              margin-right: 21rpx;
            }
          }

          .heCard {
            width: 50%;
            height: 87rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #2168eb;
          }
        }

        .yiyunxu {
          height: 87rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-size: 26rpx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          box-sizing: border-box;

          .yunxu {
            width: 50%;
            height: 87rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #2168eb;
            background-color: #ffffff;
            opacity: 0.5;

            image {
              width: 25rpx;
              height: 15rpx;
              margin-right: 21rpx;
            }
          }

          .jujue {
            width: 50%;
            height: 87rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #f14a36;
            background-color: #ffffff;
            opacity: 0.5;

            image {
              width: 25rpx;
              height: 15rpx;
              margin-right: 21rpx;
            }
          }

          .heCard {
            width: 50%;
            height: 87rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #2168eb;
          }
        }
      }
    }

    .tongzhiCard {
      width: 686rpx;
      height: 316rpx;
      padding: 36rpx 32rpx;
      background: #ffffff;
      box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(0, 0, 0, 0.16);
      border-radius: 12rpx;
      box-sizing: border-box;
      position: relative;

      .mc {
        width: 686rpx;
        height: 316rpx;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 9;
      }

      .top {
        display: flex;
        justify-content: space-between;
        margin: 0;
        padding: 0;

        .left {
          width: 360rpx;
          height: 126rpx;
          font-size: 30rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #333333;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 3;
          overflow: hidden;
        }

        .right {
          width: 226rpx;
          height: 160rpx;
          border-radius: 10rpx;

          image {
            width: 226rpx;
            height: 160rpx;
            border-radius: 10rpx;
          }
        }
      }

      .bottom {
        display: flex;
        justify-content: space-between;
        margin-top: 19rpx;

        .left {
          display: flex;

          image {
            width: 60rpx;
            height: 60rpx;
            border-radius: 30rpx;
            margin-right: 12rpx;
          }

          .l-right {
            height: 60rpx;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .company {
              height: 30rpx;
              font-size: 24rpx;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #2168eb;
            }

            .bot {
              height: 30rpx;
              font-size: 20rpx;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #959595;
            }
          }
        }

        .right {
          text {
            font-size: 20rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #959595;
          }

          .time {
            margin-left: 15rpx;
          }
        }
      }
    }

    .zixunCard {
      width: 686rpx;
      height: 316rpx;
      padding: 36rpx 32rpx;
      background: #ffffff;
      box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(0, 0, 0, 0.16);
      border-radius: 12rpx;
      box-sizing: border-box;
      position: relative;

      .mc {
        width: 686rpx;
        height: 316rpx;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 9;
      }

      .top {
        display: flex;
        justify-content: space-between;
        margin: 0;
        padding: 0;

        .left {
          width: 360rpx;
          height: 126rpx;
          font-size: 30rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #333333;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 3;
          overflow: hidden;
        }

        .right {
          width: 226rpx;
          height: 160rpx;
          border-radius: 10rpx;

          image {
            width: 226rpx;
            height: 160rpx;
            border-radius: 10rpx;
          }
        }
      }

      .bottom {
        display: flex;
        justify-content: space-between;
        margin-top: 19rpx;

        .left {
          display: flex;

          image {
            width: 60rpx;
            height: 60rpx;
            border-radius: 30rpx;
            margin-right: 12rpx;
          }

          .l-right {
            height: 60rpx;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .company {
              height: 30rpx;
              font-size: 24rpx;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #2168eb;
            }

            .bot {
              height: 30rpx;
              font-size: 20rpx;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #959595;
            }
          }
        }

        .right {
          text {
            font-size: 20rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #959595;
          }

          .time {
            margin-left: 15rpx;
          }
        }
      }
    }

    .zuzhiCard {
      width: 686rpx;
      height: 294rpx;
      padding: 36rpx 32rpx 0 32rpx;
      background: #ffffff;
      box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(0, 0, 0, 0.16);
      border-radius: 12rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      box-sizing: border-box;
      position: relative;

      .mc {
        width: 686rpx;
        height: 294rpx;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 9;
      }

      .out {
        width: 180rpx;
        height: 86rpx;
        position: absolute;
        left: 32rpx;
        bottom: 0;
        z-index: 10;
      }

      .top {
        display: flex;
        margin: 0;
        padding: 0;

        .left {
          margin-right: 29rpx;

          image {
            width: 95rpx;
            height: 95rpx;
          }
        }

        .rig {
          .orgName {
            font-size: 32rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #000000;
          }

          .center {
            display: flex;
            align-items: center;
            margin-top: 10rpx;
            margin-bottom: 20rpx;

            image {
              width: 38rpx;
              height: 38rpx;
            }

            text {
              font-size: 22rpx;
              font-family: PingFangSC-Light, PingFang SC;
              font-weight: 300;
              color: #969696;
              margin-left: 10rpx;
            }
          }

          .bott {
            display: flex;
            align-items: center;
            font-size: 24rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #969696;

            .people {
              display: flex;
              align-items: center;

              image {
                width: 21rpx;
                height: 26rpx;
                margin-right: 14rpx;
              }
            }

            .like {
              display: flex;
              align-items: center;

              image {
                width: 26rpx;
                height: 24rpx;
                margin-right: 14rpx;
                margin-left: 38rpx;
              }
            }

            .num {
              display: flex;
              align-items: center;

              image {
                width: 26rpx;
                height: 26rpx;
                margin-right: 14rpx;
                margin-left: 38rpx;
              }
            }
          }
        }
      }

      .bottom {
        width: 622rpx;
        height: 86rpx;
        border-top: 1rpx solid #eeeeee;

        .chushi {
          height: 86rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-size: 26rpx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          padding: 0 19rpx;
          box-sizing: border-box;

          .cha {
            color: #f14a36;

            image {
              width: 20rpx;
              height: 20rpx;
              margin-right: 21rpx;
            }
          }

          .gou {
            color: #2168eb;

            image {
              width: 25rpx;
              height: 15rpx;
              margin-right: 21rpx;
            }
          }

          .heCard {
            color: #2168eb;
          }
        }

        .yiyunxu {
          height: 87rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-size: 26rpx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          box-sizing: border-box;

          .yunxu {
            width: 50%;
            height: 87rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #2168eb;
            background-color: #ffffff;
            opacity: 0.5;

            image {
              width: 25rpx;
              height: 15rpx;
              margin-right: 21rpx;
            }
          }

          .jujue {
            width: 50%;
            height: 87rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #f14a36;
            background-color: #ffffff;
            opacity: 0.5;

            image {
              width: 25rpx;
              height: 15rpx;
              margin-right: 21rpx;
            }
          }

          .heCard {
            width: 50%;
            height: 87rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #2168eb;
          }
        }
      }
    }
  }

  .list:last-child {
    margin-bottom: 0;
  }
}
</style>

